<template>
  <div>
    <el-row class="moveBlock">
      <el-col :span="24">
        <el-row>
          <el-col :span="5">
            房间号:{{roomDetail.code}}
          </el-col>
          <el-col :span="6">
            网关:{{roomDetail.gateCode}}
          </el-col>
          <el-col :span="5">
            当前状态：{{roomDetail.saleState=='1'?'已售':roomDetail.saleState=='2'?'待售':roomDetail.saleState=='3'?'空置':roomDetail.saleState=='4'?'脏房':roomDetail.saleState=='5'?'维修':null}}{{roomDetail.powerOn ? '有人' : '无人'}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            空调：{{roomDetail.airConditionState == '1' ? '高风' : roomDetail.airConditionState == '2' ? '中风' : roomDetail.airConditionState == '3' ? '低风' : roomDetail.airConditionState == '255' ? '关闭':'识别不到'}}
          </el-col>
          <el-col :span="6">
            温度：{{roomDetail.tempreture}}℃
          </el-col>
          <el-col :span="5">
            湿度：{{roomDetail.humidity}}%
          </el-col>
          <el-col :span="6">

            服务：{{roomDetail.serveClean?'清扫':roomDetail.serveCheckout?'退房':roomDetail.serveSos?'sos':roomDetail.serveWash?'洗衣':roomDetail.serveWater?'送水':'无服务'}}
          </el-col>
        </el-row>

      </el-col>
    </el-row>
    <el-row class="moveBlock">
      <el-col :span="24">
        <div class="marg">统计查询</div>
        <router-link to="/home/serviceQuery"><el-button type="primary">服务查询</el-button></router-link>
        <router-link to="/home/powerQuery"><el-button type="primary" >取电查询</el-button></router-link>
        <router-link to="/home/faultQuery"><el-button type="primary" >故障查询</el-button></router-link>

      </el-col>
    </el-row>
    <el-row class="moveBlock">
      <el-col :span="24">
        <div class="marg">空调设置</div>
        <el-button :type='typeStr("1")' @click="airConditionStateQuery('1')">高风</el-button>
        <el-button :type="typeStr('2')" @click="airConditionStateQuery('2')">中风</el-button>
        <el-button :type="typeStr('3')" @click="airConditionStateQuery('3')">低风</el-button>
        <el-button :type="typeStr('255')" @click="airConditionStateQuery('255')">关闭</el-button>
      </el-col>
    </el-row>
    <el-row class="moveBlock">
      <el-col :span="24">
        <div class="marg">房态设置</div>
        <label for="state">状态</label>
        <el-select v-model="saleState" placeholder="请选择" id="state">
          <el-option v-for="saleState in saleStates" :label="saleState.name" :value="saleState.code"
                     :key="saleState.code"></el-option>
        </el-select>
        <el-button type="primary" @click="changeRoomState">确定</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        roomDetail: '',
        saleStates: [],
        saleState: '',
        typeStr(n){
          return this.roomDetail.airConditionState == n ? 'primary' : ''
        },

      }
    },
    methods: {
      airConditionStateQuery(n){
        var gateCode = this.roomDetail.gateCode;
        this.$axios.post('/api/api/airCondition', {state: n, gateCode}).then((data) => {
          console.log('请求改变空调状态', data)
        }).catch((err) => {
          console.log(err)
        })
      },
      changeRoomState(){
         var roomId=this.roomId;
         var saleState=this.saleState;
        this.$axios.put('/api/api/room',{params:{roomId,saleState}}).then((data) => {
          console.log('设置房屋状态', data)
         /* if (data.data.success) {
            this.roomDetail = data.data.room
          }*/

        })
      }
    },
    beforeCreate(){
      /*得到房间号发请求*/
      this.id = localStorage.getItem('id');
      console.log('房间id', this.id)
      this.$axios.get('/api/api/room/detail?roomId=' + this.id).then((data) => {
        console.log('房间信息', data)
        if (data.data.success) {
          this.roomDetail = data.data.room
        }

      })

      this.$axios.get('/api/api/constants').then((data) => {
        if (data.data.saleStates) {
          this.saleStates = data.data.saleStates;
        }
      })
    },
    mounted(){

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .marg {
    margin: 10px 0 20px 5px;
  }
</style>
